<template>
  <div class="layout" :style="{background: `url(${background})`}">
    <div class="backimg">
      <img :src="background" width="100%"/>
    </div>
    <div class="changeB">
      <div class="line"></div>
      <img @click="changeBK" src="../../assets/img/机器招财猫.png"/>
    </div>
    <el-container>
      <el-aside :width="width">
        <div style="width: 180px;padding-left: 10px">
          <img src="../../assets/img/鲜花(1).png" width="50px" style="margin-right: 6px"/>
          <span style="font-family: title;font-size: 24px;line-height: 55px;color: #fff">粉色花店</span>
        </div>
        <leftMenu></leftMenu>
      </el-aside>
      <el-container>
        <el-header>
          <div>
            <span @click="changeIsColl" class="icon-menu">
              <img :class="['def',isCollspace?fan:'']" src="http://www.ranjun.xyz/img/icon/鲜花速递.png"/>
            </span>
          </div>
          <div style="font-family: title;font-size: 25px;color: white">瞎玩的系统</div>
          <div style="display: flex;align-items: center">
            <img src="http://www.ranjun.xyz/img/icon/图片 (1).png" @click="downBG" width="35px" style="margin-right: 10px"/>
            <el-dropdown trigger="click" hide-on-click placement="bottom">
              <el-avatar src="http://www.ranjun.xyz/img/header/001a022de40a3c14b38f5df4a8856a42.jpeg"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
                <el-dropdown-item @click.native="downBG">
                  <div style="display: flex;align-items: center">
                    <img src="../../assets/img/图片.png" width="20px" style="vertical-align: middle"/>
                    <span>背景图</span>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <el-card style="width: 100%;height: 100%">
            <router-view></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import leftMenu from "@/components/leftMenu.vue"
import {downFile} from "@/utils/common.js"
import {mapGetters,mapMutations} from "vuex";
export default{
  components:{
    leftMenu
  },
  computed:{
    ...mapGetters(["isCollspace","background"])
  },
  mounted() {
    console.log(this.background)
  },
  data(){
    return{
      index:0,
      width:"200px",
      fan:"fanzhuan",
      BgList:[
          "/img/Bg/15.jpg",
          "/img/Bg/11.png",
          "/img/Bg/14.jpg",
          "/img/Bg/08.jpg",
          "/img/Bg/07.jpg",
          "/img/Bg/06.jpg",
          "/img/Bg/05.jpg",
          "/img/Bg/04.jpg",
          "/img/Bg/03.jpg",
          "/img/Bg/02.jpg",
          "/img/Bg/01.jpg",
          "/img/Bg/09.jpg",
          "/img/Bg/10.jpg",
          "/img/Bg/11.jpg",
          "/img/Bg/12.jpg",
          "/img/Bg/13.jpg",
      ],
    }
  },
  created() {
    this.SET_BG()
  },
  watch:{
    isCollspace(newVal){
      if(newVal == false){
        this.width="200px"
      }else {
        this.width='65px'
      }
    }
  },
  methods:{
    ...mapMutations("home",["SET_Collspace"]),
    ...mapMutations("permission",["SET_BG"]),
    changeBK(){
      this.index+=1
      if(this.index>this.BgList.length){
        this.index=0
      }
      window.localStorage.setItem('bg',this.BgList[this.index])
      this.SET_BG()
    },
    changeIsColl(){
      this.SET_Collspace(!this.isCollspace)
    },
    logOut(){
      this.$router.replace('/login')
    },
    downBG(){
      downFile(this.background,'背景图.jpg')
    }
  }
}
</script>
<style scoped lang="scss">
.backimg{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.layout{
  width: 100%;
  height: 100%;
  //background-repeat: no-repeat;
  //background-position: center;
  //background: url("../../assets/img/0003229mRl4.jpg") no-repeat 100% 100%;
  //background-size: 100% 100%;
}
.el-aside{
  height: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.3s;
  background-image: linear-gradient(to right top, rgba(0,0,0,0.6), rgba(0,0,0,0.7));
  //box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);
  backdrop-filter: blur(10px) brightness(110%);
}
.el-container{
  height: 100%;
}
::v-deep .el-header{
  height: 50px !important;
  background-image: linear-gradient(to right top, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
  //box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);
  backdrop-filter: blur(10px) brightness(110%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-main{
  padding: 5px;
}
::v-deep .el-card{
  background-image: linear-gradient(to right top, rgba(255,255,255,0.3), rgba(255,255,255,0.3));
  //box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);
  backdrop-filter: blur(10px) brightness(110%);
}
.el-card{
  background: transparent;
  border: 0;
  height: 100%;
}
.fanzhuan{
  transform: rotateY(180deg)
}
.def{
  transition: all 0.5s;
}
::v-deep .el-card__body{
  height: 100%;
  padding: 10px;
}
.changeB{
  width: 70px;
  display: inline-block;
  position: fixed;
  top: -100px;
  right: 100px;
  z-index: 1000;
  transition: all 2s;
  >img{
    width: 100%;
    z-index: 20;
    position: relative;
  }
  animation: zy 3s infinite linear;
}
.line{
  width: 0;
  border-right: 1px black solid;
  margin:0 auto -20px;
  height: 150px;
}
@-webkit-keyframes zy{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }
}
</style>